<template>
  <div style="position: relative;font-size: 12px;">
    <div style="text-align: center;"><img width="87.65%" height="795px" src="http://qncdn.tissys.com/admin/static/table3.png" alt /></div>
    <!-- 2020年1月4日13:22:58 修改尺寸给height和top -->
    <div class="poson" style="position: absolute;top: 11px;left: 50%;margin-left: -4%;">
      <div class="contestant" :style="{'margin-bottom': index < 16 ? index %2 == 0 ? '8px' :'9px' :index%2==0? '9px': '8px', 'margin-top': index ==16 ? '14px': '0','height':'16.1px'}" v-for="(itme, index) in contestant" :key="`${index}b`">
      {{itme.team_name === null || itme.team_name ==='' ? itme.user_name : itme.team_name}}
      </div>
    </div>
    <!-- win -->
    <div class="win_32">
      <div :style="{height: index === 3 ? '107px' : '98px'}" v-for="(itme, index) in win[0]" :key="`${index}A`">
        <div style="margin-bottom: 19px;height: 32px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}a`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}b`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <!-- win_FourStrong_32 right -->
    <div class="win_FourStrong_32_01">
      <div :style="{height: index === 1 ? '206px' : '195px'}" v-for="(itme, index) in win[1].slice(0,4)" :key="`${index}B`">
        <div style="margin-bottom: 69px;height: 32px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}ba`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}bb`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <!-- win_FourStrong_32 left -->
    <div class="win_FourStrong_32_02">
      <div :style="{height: index === 1 ? '206px' : '195px'}" v-for="(itme, index) in win[1].slice(4,8)" :key="`${index}C`">
        <div style="margin-bottom: 69px;height: 32px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}ca`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}cb`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <!-- win_Strong_16 -->
    <div class="win_Strong_16_01">
      <div style="height:402px" v-for="(itme, index) in win[2].slice(0,2)" :key="`${index}D`">
        <div style="margin-bottom: 63px;height: 132px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}da`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}db`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_16_02">
      <div style="height:402px" v-for="(itme, index) in win[2].slice(2,4)" :key="`${index}V`">
        <div style="margin-bottom: 63px;height: 132px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_16_03">
      <div style="height:402px" v-for="(itme, index) in win[2].slice(4,6)" :key="`${index}V`">
        <div style="margin-bottom: 63px;height: 132px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_16_04">
      <div style="height:402px" v-for="(itme, index) in win[2].slice(6,8)" :key="`${index}V`">
        <div style="margin-bottom: 63px;height: 132px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_8_01">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in win[3].slice(0,1)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_8_02">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in win[3].slice(1,2)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_8_03">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in win[3].slice(2,3)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_8_04">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in win[3].slice(3,4)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>

    <div class="win_Strong_8_05">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in win[3].slice(4,5)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_8_06">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in win[3].slice(5,6)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_8_07">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in win[3].slice(6,7)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="win_Strong_8_08">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in win[3].slice(7,8)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <!-- 决出1-16名 -->
    <div class="win_Strong_rank_16">
      <div :style="{'width': index%2==0 ? '5%' : '8%', 'margin-left': index==14 ? '4.6%' : ''}" v-for="(itme, index) in win[4]"
        :key="`${index}B`">
        <span style="height: 16px;">{{ itme.site_a }}</span>
        <div style="height: 12px;white-space: nowrap;" v-for="(itmes, index) in itme.score" :key="`${index}I`">
          <span>{{ itmes.top }}-</span>{{ itmes.bot }}
          <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
        </div>
      </div>
    </div>
    <!-- fail -->
    <div class="fail_32">
      <div :style="{height: index === 3 ? '107px' : '98px'}" v-for="(itme, index) in fail[0]" :key="`${index}A`">
        <div style="margin-bottom: 19px;height: 32px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}a`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}b`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <!-- fail_FourStrong_32 right -->
    <div class="fail_FourStrong_32_01">
      <div :style="{height: index === 1 ? '206px' : '195px'}" v-for="(itme, index) in fail[1].slice(0,4)" :key="`${index}B`">
        <div style="margin-bottom: 69px;height: 32px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}ba`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}bb`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <!-- fail_FourStrong_32 left -->
    <div class="fail_FourStrong_32_02">
      <div :style="{height: index === 1 ? '206px' : '195px'}" v-for="(itme, index) in fail[1].slice(4,8)" :key="`${index}C`">
        <div style="margin-bottom: 69px;height: 32px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}ca`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}cb`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <!-- fail_Strong_16 -->
    <div class="fail_Strong_16_01">
      <div style="height:402px" v-for="(itme, index) in fail[2].slice(0,2)" :key="`${index}D`">
        <div style="margin-bottom: 63px;height: 132px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}da`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}db`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_16_02">
      <div style="height:402px" v-for="(itme, index) in fail[2].slice(2,4)" :key="`${index}V`">
        <div style="margin-bottom: 63px;height: 132px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_16_03">
      <div style="height:402px" v-for="(itme, index) in fail[2].slice(4,6)" :key="`${index}V`">
        <div style="margin-bottom: 63px;height: 132px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_16_04">
      <div style="height:402px" v-for="(itme, index) in fail[2].slice(6,8)" :key="`${index}V`">
        <div style="margin-bottom: 63px;height: 132px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_8_01">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in fail[3].slice(0,1)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_8_02">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in fail[3].slice(1,2)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_8_03">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in fail[3].slice(2,3)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_8_04">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in fail[3].slice(3,4)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>

    <div class="fail_Strong_8_05">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in fail[3].slice(4,5)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_8_06">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in fail[3].slice(5,6)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_8_07">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in fail[3].slice(6,7)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <div class="fail_Strong_8_08">
      <div style="position: relative;height: 412px;" v-for="(itme, index) in fail[3].slice(7,8)" :key="`${index}V`">
        <div style="margin-bottom: 138px;height: 264px;">
          <div style="height: 16px;">{{ itme.site_a }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_a" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
        <div style="height: 32px;">
          <div style="height: 16px;">{{ itme.site_b }}</div>
          <span style="height: 16px;" v-for="(itmes, index) in itme.score_b" :key="`${index}I`">
            <span>{{ itmes.top }}-</span>{{ itmes.bot }}
            <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
          </span>
        </div>
      </div>
    </div>
    <!-- 决出17-32名 -->
    <div class="fail_Strong_rank_16">
      <div :style="{'width': index%2==0 ? '4%' : '7.66%'}" v-for="(itme, index) in fail[4]" :key="`${index}B`">
        <span style="height: 16px;">{{ itme.site_a }}</span>
        <div style="height: 12px;white-space: nowrap;" v-for="(itmes, index) in itme.score" :key="`${index}I`">
          <span>{{ itmes.top }}-</span>{{ itmes.bot }}
          <span v-if="itmes.tiebreak != ''">({{ itmes.tiebreak }})</span>&nbsp;
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      win: Array,
      fail: Array,
      contestant: Array
    },
    filters: {
      Score(item, val) {
        //高比分在前
        if (item.user_sign_id == item.sign_id_a) {
          return `${val.top}-${val.bot}`;
        } else {
          return `${val.bot}-${val.top}`;
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  .win_32 {
    position: absolute;
    top: 13px;
    left: 50%;
    margin-left: 20.8%;
  }

  .win_FourStrong_32_01 {
    position: absolute;
    top: 38px;
    left: 50%;
    margin-left: 30%;
  }

  .win_FourStrong_32_02 {
    position: absolute;
    top: 38px;
    left: 50%;
    margin-left: 14%;
  }

  .win_Strong_16_01 {
    position: absolute;
    top: 88px;
    left: 50%;
    margin-left: 35%;
  }

  .win_Strong_16_02 {
    position: absolute;
    top: 88px;
    left: 50%;
    margin-left: 27.6%;
  }

  .win_Strong_16_03 {
    position: absolute;
    top: 88px;
    left: 50%;
    margin-left: 16%;
  }

  .win_Strong_16_04 {
    position: absolute;
    top: 88px;
    left: 50%;
    width: 100px;
    margin-left: 9%;
  }

  .win_Strong_8_01 {
    position: absolute;
    top: 186px;
    left: 50%;
    margin-left: 39.6%;
  }

  .win_Strong_8_02 {
    position: absolute;
    top: 186px;
    left: 50%;
    margin-left: 35%;
  }

  .win_Strong_8_03 {
    position: absolute;
    top: 186px;
    left: 50%;
    margin-left: 28%;
  }

  .win_Strong_8_04 {
    position: absolute;
    top: 186px;
    left: 50%;
    width: 100px;
    margin-left: 25%;
  }

  .win_Strong_8_05 {
    position: absolute;
    top: 186px;
    left: 50%;
    width: 100px;
    margin-left: 18.6%;
  }

  .win_Strong_8_06 {
    position: absolute;
    top: 186px;
    left: 50%;
    width: 100px;
    margin-left: 16%;
  }

  .win_Strong_8_07 {
    position: absolute;
    top: 186px;
    left: 50%;
    width: 100px;
    margin-left: 9%;
  }

  .win_Strong_8_08 {
    position: absolute;
    top: 186px;
    left: 50%;
    width: 100px;
    margin-left: 6.6%;
  }

  .win_Strong_rank_16 {
    width: 40%;
    display: flex;
    position: absolute;
    top: 386px;
    left: 50%;
    margin-left: 4.6%;
  }
  // fail
  .fail_32 {
    position: absolute;
    top: 13px;
    right: 50%;
    margin-right: 22.6%;
  }

  .fail_FourStrong_32_01 {
    position: absolute;
    top: 38px;
    right: 50%;
    margin-right: 32%;
  }

  .fail_FourStrong_32_02 {
    position: absolute;
    top: 38px;
    right: 50%;
    margin-right: 15.6%;
  }

  .fail_Strong_16_01 {
    position: absolute;
    top: 88px;
    right: 50%;
    margin-right: 36.6%;
  }

  .fail_Strong_16_02 {
    position: absolute;
    top: 88px;
    right: 50%;
    margin-right: 30%;
  }

  .fail_Strong_16_03 {
    position: absolute;
    top: 88px;
    right: 50%;
    margin-right: 18%;
  }

  .fail_Strong_16_04 {
    position: absolute;
    top: 88px;
    right: 50%;
    width: 100px;
    margin-right: 6.6%;
  }

  .fail_Strong_8_01 {
    position: absolute;
    top: 186px;
    right: 50%;
    margin-right: 39%;
  }

  .fail_Strong_8_02 {
    position: absolute;
    top: 186px;
    right: 50%;
    margin-right: 37%;
  }

  .fail_Strong_8_03 {
    position: absolute;
    top: 186px;
    right: 50%;
    margin-right: 29.8%;
  }

  .fail_Strong_8_04 {
    position: absolute;
    top: 186px;
    right: 50%;
    width: 100px;
    margin-right: 23.2%;
  }

  .fail_Strong_8_05 {
    position: absolute;
    top: 186px;
    right: 50%;
    width: 100px;
    margin-right: 16%;
  }

  .fail_Strong_8_06 {
    position: absolute;
    top: 186px;
    right: 50%;
    width: 100px;
    margin-right: 14%;
  }

  .fail_Strong_8_07 {
    position: absolute;
    top: 186px;
    right: 50%;
    width: 100px;
    margin-right: 6.6%;
  }

  .fail_Strong_8_08 {
    position: absolute;
    top: 186px;
    right: 50%;
    width: 100px;
    margin-right: 4%;
  }

  .fail_Strong_rank_16 {
    width: 40%;
    display: flex;
    position: absolute;
    top: 386px;
    right: 50%;
    margin-right: 2.3%;
  }
</style>
